<template>
  <Table
    border
    :max-height="h"
    stripe
    highlight-row
    :columns="row_number.data"
    :data="prop.paras && prop.paras.data"
    :show="prop.paras && prop.paras.show"
    :loading="prop.paras && prop.paras.loading"
    ref="tbl"
  >
    <template v-for="item in prop.paras && prop.paras.columns" #[item.slot]="param">
      <slot :name="item.slot" v-bind="param"></slot>
    </template>
  </Table>
</template>
<script setup>
import { reactive } from 'vue'
const prop = defineProps({
  paras: { columns: [], data: [], loading: false, pageNo: 1, pageSize: 15, show: false },
})

const row_number = reactive({
  data: [
    {
      title: '序号',
      type: prop.paras && prop.paras.show === true ? 'selection' : 'index',
      align: 'center',
      fixed: 'left',
      width: 80,
      indexMethod: (row) => {
        return prop.paras.pageNo * prop.paras.pageSize - prop.paras.pageSize + row._index + 1
      },
    },
  ],
})
prop.paras &&
  prop.paras.columns.forEach((element) => {
    row_number.data.push(element)
  })

const h = computed(() => {
  return window.screen.height - 440
})
</script>
